<template>
  <div>
      <userID></userID>
      <NavigationBar></NavigationBar>
      <swiper></swiper>
      <showOne color="#F0F9F4" :data="data" title="新鲜好物" dic1="新鲜出炉" dic2="品质靠谱"></showOne>
      <showTwo :data="data2" title="人气推荐" dic1="人气爆款" dic2="不容错过"></showTwo>
      <showThree></showThree>
      <showFour v-for="i in data3" :key="i.id" :data="i"></showFour>
      <bottom></bottom>
  </div>
</template>

<script>
  import showOne from './components/showOne.vue'
  import showTwo from './components/showTwo.vue'
  import swiper from './components/swiper.vue'
  import showThree from './components/showThree.vue'
  import showFour from "./components/showFour.vue"
  import userID from '@/components/userID.vue'
  import NavigationBar from '@/components/NavigationBar.vue'
  import bottom from '@/components/bottom.vue'
  export default {
    data(){
      return {
        data:null,
        data2:null,
        data3:null,
      }
    },
    async mounted(){
      const res = await this.$.getHomeNewGoods();
      this.data = res.data.result;
      const res2= await this.$.getHomeHot();
      this.data2 = res2.data.result;
      const res3 = await this.$.getHomeTwoMenu();
      this.data3 = res3.data.result.slice(0,3)
    },
    components:{
      swiper,
      showOne,
      showTwo,
      showThree,
      showFour,
      userID,
      NavigationBar,
      bottom,
    }
  }
</script>

<style>

</style>